{extend name="layout/layout" /}

{block name="style"}
	<style type="text/css">
		.mui-bar{
			background: #f7f7f7;
			position: relative;
		}

		.mui-bar *{
			color:#333;
		}

		.mui-bar input{
			margin-bottom: 0;
			padding: 0 10px;
			margin: 5px 0;
			height: 35px;
			line-height: 35px;
			font-size: 12px;
			caret-color:red;
			border:none;
		}

		.history, .hot{
			padding: 10px;
			background: #fff;
			margin-top: 10px;
		}

		.title{
			margin-bottom: 10px;
		}

		.title *{
			font-size: 12px;
		}

		.item{
			float: left;
			padding: 5px 10px;
			background: rgba(0, 0, 0, 0.2);
			color:#333;
			margin-right: 10px;
			border-radius: 5px;
			margin-bottom: 10px;
		}

		.title .mui-icon{
			font-size: 16px;
		}
		.title .mui-icon-closeempty{
			border:1px solid rgba(0, 0, 0, 0.2);
			border-radius: 50%;
			font-size: 20px;
		}
	</style>
{/block}


{block name="header"}

{/block}


{block name="main"}
<div class="container">
	<div class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">
			<input type="text" id="keyword" v-model="keyword" autofocus="autofocus" placeholder="商品名称" >
		</h1>
		<a class="mui-icon mui-icon-search mui-pull-right" href="javascript:;" @tap="search()"></a>
	</div>

	<div class="history">
		<div class="title">最近搜索 <i class="mui-icon mui-icon-closeempty mui-pull-right" @tap="clearHistory()"></i></div>
		<div class="list" v-if="historys.length > 0">
			<div class="item" v-for="hotItem in historys" @tap="setKeyword(hotItem)">{{hotItem}}</div>	
			<div class="mui-clearfix"></div>		
		</div>

		<div class="list mui-text-center" style="color:rgba(0, 0, 0, 0.2);" v-else>暂无搜索历史</div>
	</div>

	<div class="hot">
		<div class="title">
			热门搜索 
			<span class="mui-pull-right" @tap="switchWord()">
				<i class="mui-icon mui-icon-loop"></i> 
				换一批
			</span>
		</div>
		<div class="list">
			<div class="item" v-for="hisItem in hotSearch[keyword_index]" @tap="setKeyword(hisItem)">
				{{hisItem}}
			</div>
			<div class="mui-clearfix"></div>		
		</div>
	</div>
</div>
{/block}

{block name="script"}
	<script type="text/javascript">
		var searchVue = new Vue({
			el:'.container',
			data: {
				historys: [],
				hotSearch: [],
				page:1,
				keyword:'',
				keyword_index: 0,
			},
			mounted: function(){
				this.getHotSearch();
				this.getHistory();
			},
			methods: {
				//获取热门搜索
				getHotSearch: function(){
			
					var url = 'goods/hotSearch';
					var that = this;
					request(that, {'url': url, 'data': {page:this.page}}, function(res){
						if(res.code == 200) {
							if(res.data.length == 0){
								that.page = 1;
							} else {
								that.page ++;
							}
							that.hotSearch = res.data;
						}	
					});
				},
				//搜索
				search: function(){
					var history = localStorage.getItem('searchHistory');
					var keyword = this.keyword;
					if(!keyword) {
						mui.toast('请输入要搜索的内容');
						return ;
					}

					console.log(history);
					if(history) {
						history = history.split(',');
						history.forEach(function(item, index){
							if(item == keyword) {
								history.splice(index,1);
							}
						});

						history = history.toString();
						history = keyword+','+history;
						localStorage.setItem('searchHistory', history);
					} else {
						localStorage.setItem('searchHistory', this.keyword);
					}
					location.href = '/mobile/goods/searchGoods?keyword='+keyword;
				},
				//获取历史搜索记录
				getHistory: function(){
					var history = localStorage.getItem('searchHistory');
					if(history) {
						this.historys = history.split(',');
					} else {
						this.historys = [];
					}
				},
				//清空历史记录
				clearHistory: function(){
					localStorage.removeItem('searchHistory');
					this.getHistory();
				},
				//设置搜索字
				setKeyword: function(val) {
					this.keyword = val;
					this.search();
				},
				//换一换
				switchWord: function(){
					if(this.keyword_index < this.keyword.length-1) {
						this.keyword_index ++;
					}
				}
			
			}
		});	


	
	</script>
{/block}

{block name="navbar"}{/block}